<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="../vue_lib/vue.js"></script>
    <title>使用vue</title>
</head>
<body>
<div id="app">
   <ul>
       <li v-for="product in products">
           <input type="number" v-model.number="product.quantity"> {{ product.name }}
           <span v-if="product.quantity === 0 ">- 商品售卖完了!</span>
           <button @click="product.quantity +=1 ">增加</button>
       </li>
   </ul>
    <h2>商品总数：{{ totalProducts }}</h2>
</div>
<script>
   var vm = new Vue({
       el:"#app",
       data:{
           products:[
           ]
       },
       computed:{
           totalProducts(){
               return this.products.reduce((sum,product)=>{
                   return sum + product.quantity
               },0)
           }
       },
   // {"products":[{"id":1,"quantity":1,"name":"Compass"},{"id":2,"quantity":0,"name":"Jacket"},{"id":3,"quantity":5,"name":"Hiking Socks"},{"id":4,"quantity":2,"name":"Suntan Lotion"}]}
       created(){
           fetch('https://api.myjson.com/bins/74l63')
               .then(response => response.json())
               .then(json =>{
                   this.products = json.products
               })
       }
   })
</script>
</body>
</html>